<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态卡片展示</title>
  <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.net/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.net/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <!-- 引入Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
  <!-- 引入jqPaginator插件 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jqpagination@1.3.1/dist/jqPaginator.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jqpagination@1.3.1/dist/jqPaginator.min.js"></script>

  <!-- 引入自定义CSS -->
  <style>
    /* 页面背景渐变 */
    body {
      background: linear-gradient(to right, #8ecae6, #e7d0eb, #f9a0c0, #fad29a, #fde68a);
      font-family: 'Arial', sans-serif;
    }

    /* 按钮区样式 */
    .button-container {
      margin-top: 20px;
      margin-bottom: 20px;
    }

    .button-container button {
      margin-right: 10px;
    }

    /* 卡片的 hover 动效 */
    .card:hover {
      transform: scale(1.05);
      transition: transform 0.3s ease-in-out;
    }

    /* 卡片内容居中 */
    .card-body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center; /* 水平居中 */
      text-align: center;  /* 垂直居中 */
      margin: auto;
    }

    /* 图片自适应宽度 */
    .card-img-top {
      width: 300px;  /* 设置图片宽度为300px */
      height: 200px; /* 设置图片高度为200px */
      object-fit: cover;  /* 保证图片按比例缩放，避免拉伸 */
    }
  </style>
</head>

<body>
<!-- 按钮区 -->
<div class="container button-container">
  <button class="btn btn-info" id="addBtn">增加</button>
  <button class="btn btn-info" id="deleteBtn">删除</button>
  <button class="btn btn-info" id="editBtn">修改</button>
  <button class="btn btn-info" id="searchBtn">查找</button>
  <button class="btn btn-info" id="logoutBtn">退出登录</button>
  <button class="btn btn-info" id="uploadBtn">上传文件</button>
</div>

<!-- 动态卡片展示区 -->
<div class="container py-5">
  <div class="row row-cols-1 row-cols-md-3 g-4" id="cardContainer">
    <!-- 动态生成的卡片内容会插入这里 -->
  </div>
</div>

<!-- 分页 -->
<div>
  <ul class="pagination pagination-lg justify-content-center" id="pageContainer">
    <!-- 静态分页按钮 -->
    <li><a href="#" class="page-link" data-page="1">&laquo; 1</a></li>
    <li><a href="#" class="page-link" data-page="2">2</a></li>
    <li><a href="#" class="page-link" data-page="3">3</a></li>
    <li><a href="#" class="page-link" data-page="4">4</a></li>
    <li><a href="#" class="page-link" data-page="5">5</a></li>
    <li><a href="#" class="page-link" data-page="6">6 &raquo;</a></li>
  </ul><br>
</div>

<!-- 引入jQuery和Bootstrap JS -->
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<!-- 引入 jQuery -->
<script src="../js/jquery.min.js"></script>

<script>
  $(document).ready(function () {
    // 获取当前页码
    var urlParams = new URLSearchParams(window.location.search);
    var pageNum = parseInt(urlParams.get('pageNum') || 1);  // 默认为第一页
    console.log("当前页码：" + pageNum);

    // 使用AJAX从后端获取数据并动态生成卡片
    function fetchGymData(pageNum) {
      $.ajax({
        url: '/gym/GymList', // 后端返回数据的接口
        method: 'GET',
        dataType: 'json',
        data: {
          pageNum: pageNum, // 传递当前页码
          pageSize: 5  // 每页显示5个数据
        },
        success: function (data) {
          let finalHtml = ''; // 用于拼接最终的HTML

          // 遍历返回的 gymInfos 数组
          data.gymInfos.forEach(function (gym) {
            finalHtml += '<div class="col-md-4 mb-4">';
            finalHtml += '<div class="card h-100 shadow-sm">';
            finalHtml += '<div class="card-body">';
            finalHtml += '<img src="../imgs/1.png" class="card-img-top">';
            finalHtml += '<h5 class="card-title text-primary">' + gym.gymName + '</h5>';
            finalHtml += '<p class="card-text text-secondary">';
            finalHtml += '<strong>位置:</strong> ' + gym.gymLocation + '<br>';
            finalHtml += '<strong>简介:</strong> ' + gym.gymDescription + '<br>';
            finalHtml += '</p>';
            finalHtml += '</div>';
            finalHtml += '</div>';
            finalHtml += '</div>';  // 结束一个体育馆卡片的 div
          });

          // 将拼接的HTML插入到页面中的 #cardContainer 容器中
          $('#cardContainer').html(finalHtml);
        },
        error: function (error) {
          console.log('请求失败', error);
        }
      });
    }

    // 初始化加载数据
    fetchGymData(pageNum);

    // 增加按钮
    $('#addBtn').click(function () {
      window.location.href = 'addgynInfo.jsp';
    });

    // 删除按钮
    $('#deleteBtn').click(function () {
      window.location.href = 'deletegymInfo.jsp';
    });

    // 修改按钮
    $('#editBtn').click(function () {
      window.location.href = 'editgymInfo.jsp';
    });

    // 查找按钮
    $('#searchBtn').click(function () {
      window.location.href = 'serarchgymInfo.jsp';
    });

    // 退出登录按钮
    $('#logoutBtn').click(function () {
      window.location.href = '/gym/logout';
      window.location.href = 'login.jsp';
    });

    // 上传文件按钮
    $('#uploadBtn').click(function () {
      $('#fileInput').click();
    });

    // 分页按钮点击事件
    $('#pageContainer .page-link').click(function (e) {
      e.preventDefault();
      var page = $(this).data('page');  // 获取当前页码
      fetchGymData(page);  // 重新加载数据
      window.history.pushState(null, null, "?pageNum=" + page); // 更新浏览器地址栏
    });
  });
</script>

<input type="file" id="fileInput" style="display:none;" />
</body>

</html>
